<template>
  <el-container class="bill-layout-template">
    <el-main>
      <el-card shadow="never" class="bill-info-container">
        <div class="bunk-info-container">
          <div class="left-container">
            <div class="left-title">
              <span>单据类型:</span>
            </div>
            <el-card shadow="never" class="bunk-info-list-card">
              <el-tree
                ref="treeList"
                :data="treeList"
                :props="defaultProps"
                highlight-current
                :check-on-click-node="false"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </el-card>
          </div>
          <div class="right-container">
            <el-card shadow="never" class="tableCard">
              <vxe-toolbar :refresh="{query: getList1}" >
                <template v-slot:buttons>
                  <el-button type="primary" icon="el-icon-plus" @click="openDialog('', false)">新增模板</el-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                row-key
                resizable
                highlight-hover-row
                :auto-resize="true"
                :data="list"
                width
                max-height="500"
                row-id="id"
                highlight-current-row
                text-algin="center"
                :print-config="{}"
                header-align="center"
              >
                <vxe-table-column type="seq" width="50" align="center" />
                <vxe-table-column field="templateName" width="200" align="left" title="模板名称" />
                <vxe-table-column field="paperWidthDesc" width="180" align="center" title="打印宽度" />
                <vxe-table-column show-overflow title="备注" field="remark" align="left" min-width="250" />
                  <vxe-table-column title="状态" width="80" align="center" slots="default">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
                    </template>
                  </vxe-table-column>
                <vxe-table-column title="操作" fixed="right" align="center" width="160">
                  <template slot-scope="scope">
                    <div class="drag-btn">
                      <el-button type="text" size="mini" @click="openDialog(scope.row.id, true)">查看</el-button>
                      <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="openDialog(scope.row.id, false)">编辑</el-button>
                      <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="delClick(scope.row.id)">删除</el-button>
                    </div>
                  </template>
                </vxe-table-column>
              </vxe-table>
            </el-card>
          </div>
        </div>
      </el-card>
   </el-main>
  </el-container>
</template>

<script>
import { listPrintTemplate, delPrintTemplate, changePrintTemplateStatus } from '@/api/print'
import { getBillTypeTreeList } from '@/api/public'
export default {
  data() {
    return {
      currentNodekey: '1',
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        root: 'root',
        fixed: 'fixed'
      },
      searchParams: {
        billTypeId: '',
        content: ''
      },
      disabledEdit: true,
      list: []
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      getBillTypeTreeList({ parentId: '0' })
        .then(res => {
          if (res) {
            this.treeList = res
            this.$nextTick(() => {
              this.getList()
            })
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    handleNodeClick(data) {
      if(data.hasChildren){
         return false
      }
      this.searchParams = {}
      if (data.root === 1) {
        this.searchParams.billTypeId = ''
      } else {
        this.searchParams.billTypeId = data.id
      }
      this.pageNum = 1
      this.getList()
    },
    getList1(){
      this.getList()
    },
    // 列表
    getList() {
      listPrintTemplate({...this.searchParams}).then(res =>{
        if(res){
          if(res.code){
            this.$message.error(`${res.msg}`);
          }else{
            this.list = res
          }
        }
      })
    },
    openDialog(id, bool){
       this.$router.push({ path: '/printSetting/billLayoutTemplateDefine', query: { id: id, editDisabled: bool }})
    },
    // 删除
    delClick(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPrintTemplate(id).then(res => {
          this.$message.success('删除成功!')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    changeState(scope) {
      this.list[scope.seq - 1].publishStatus =
        scope.row.publishStatus === 1 ? 0 : 1
      changePrintTemplateStatus({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then((response) => {
        this.list[scope.seq - 1].publishStatus =
          scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.publishStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    }
  }
}
</script>

<style>
  .bill-layout-template {
    .bill-info-container {
      width: 100%;
      .bunk-info-container {
        display: flex;
        .left-container {
          margin-right: 20px;
          .left-title {
             font-size: 13px;
             font-weight: 700;
             padding: 10px 10px;
             margin-bottom: 10px;
             height: 30px;
          }
          .bunk-info-list-card {
            height: 570px;
            overflow-y: auto;
            width: 180px;
            font-size: 13px;
          }
        }
        .right-container {
          width: calc(100% - 160px);
          .commercia-tenant-list-title {
            margin-bottom: 20px;
            .el-card__body {
              padding:  0;
            }
          }
        }
        .logoImg {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
</style>
